<template>
 <button class="btn"  @click="relevancyClass" title="关联班级"><el-icon><Link/></el-icon></button>
 <el-dialog v-model="dialogVisible" title="关联班级" width="90%">
    <template #footer>
        <RelevancyStudent></RelevancyStudent>
         <span class="dialog-footer">
           <el-button type="primary" @click="submit">
             确认
           </el-button>
           <el-button type="primary" @click="dialogVisible = false">
             取消 
           </el-button>      
         </span>
       </template>
</el-dialog>
</template>
<script>
import { Link } from '@element-plus/icons-vue'
import RelevancyStudent from '@/page/RelevancyStudent.vue';
 export default {
    name: 'LINK_USER_TABLE',
    props:["userList"],
    components:{
        Link,RelevancyStudent
    },
    data: function(){
       return {
           dialogVisible:false,
           formData:{
               phone:""
           }
       }
       },
        methods:{
            relevancyClass(){
                this.$emit("getSelectData");
               this.dialogVisible = true;
               var that = this;
               this.formData.userUuids="";
            },
            submit(){
                var that = this;
                this.formData.userUuid = sessionStorage.getItem('token1');
                window.sessionStorage.setItem('token',this.formData)
                window.http.post('/api/user/revise',this.formData).then(res => {
                console.info(JSON.stringify(res));
                var data = res.data;
                if(data.success){
                    that.$message.success('关联成功');
                }else{
                    that.$message.error('关联失败');
                } 
                })
                .catch(function(error){
                that.$message.error('服务器异常');
                })
            }, 
        },
        mounted(){
            var that = this;
            this.$bus.on("relevancyClassStuById",function(row){
                that.dialogVisible = true;
                that.formData.phone ="";
            })
       },
        unmounted(){
            this.$bus.off("relevancyClassStuById")
       }
    
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>